<!-- 图片显示 -->
<template>
  <div class="image-main">
    <BtnText
      type="primary"
      :isIcon="isIcon"
      @BtnClick="ViewImg(echoFile[0])"
      v-if="isViewBtn"
      >查看</BtnText
    >
    <div class="image-list-main" v-else>
      <div
        class="image-item"
        v-for="item in $props.echoFile"
        :key="item.fileId"
      >
        <BtnText type="primary" isIcon @BtnClick="ViewImg(item)">查看</BtnText>
        <div class="close-btn" @click="delImge(item)">
          <Icon type="md-close-circle" />
        </div>
      </div>
    </div>
    <Modal v-model="modalValue" title="预览">
      <vue-viewer
        v-if="image"
        style="display: inline-block; cursor: pointer"
        :thumb="image"
        :full="image"
      >
      </vue-viewer>
      <div slot="footer" class="footer-btn">
        <!-- <BtnBox isIcon type="light-blue" text="取消" /> -->
        <BtnBox
          isIcon
          type="light-blue"
          text="关闭"
          @BtnClick="modalValue = false"
        />
        <!-- <Button @click="handleCancel()">取消</Button>
        <Button @click="handleOk('FormRef')">确定</Button> -->
      </div>
    </Modal>
  </div>
</template>

<script type="text/javascript">
const Setting = require("@/setting").default;
export default {
  name: "image-content",
  props: {
    isIcon:{
      type: Boolean,
      default: false,
    },
    errorMsg:{
      type: String,
      default: "",
    },
    echoFile: {
      type: Array,
      default: () => [],
    },
    isViewBtn: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      baseUrl: "",
      isUploadDisabled: false,
      apiBaseURL: Setting.apiBaseURL,
      image: "",
      modalValue: false,
    };
  },
  methods: {
    ViewImg(item) {
      console.log('jpeg,',item,this.$props.echoFile)
      if(!item){
        this.$Message.error("未上传"+ this.$props.errorMsg +"！")
        return
      }
      this.image = this.apiBaseURL + item.filePreviewUrl;
      let isImg = ["png", "jpg", "jpeg"];
      if (isImg.includes(item.fileSuffix)) {
        this.modalValue = true;
        return;
      }
      window.open(this.image, "_blank");
    },
    delImge(index) {
      this.$emit("delImge", index);
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.image-list-main {
  margin-bottom: 15px;
  display: flex;
}
.image-item {
  width: 25%;
  margin-right: 10px;
  padding: 15px;
  background: #fafafa;
  border: 4px;
  position: relative;
  .close-btn {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}
.image-main{
  display: flex;
  align-items: center;
}
</style>
